<template>
  <video ref="video" autoplay muted preload="auto" width="744.66px" height="572px" style="background: #0F373F"  v-loading="loading"></video>
</template>

<script>
import {Unicom} from "../../common/utils";
import {getCameraUrl} from "../../network/cameraVideoApi";

let Hls = require('hls.js')
export default {
  name: "bigScreen",
  data() {
    return {
      hls: '',
      id: "68c20b3fa4e3410cbd07fd5227474f35",
      loading: true,
    }
  },
  mounted() {
    this.getStream(this.id);
    Unicom.$on("videoIndex", res => {
      this.id = res;
      this.getStream(this.id);

    })
    console.log(111)
  },
  methods: {
    videoPause() {
      if (this.hls) {
        this.$refs.video.pause();
        this.hls.destroy();
        this.hls = null;
      }
    },
    getStream(id) {
        this.hls = new Hls();
      getCameraUrl({id,showMessage:1}).then(res=>{
        let url = res.data;
        console.log(res)
        if (url) {
          this.hls.loadSource(url);
          this.hls.attachMedia(this.$refs.video);
          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
            this.loading = false;
            let playPromise = this.$refs.video.play();
            if (playPromise !== undefined) {
              playPromise.then(() => {
                this.$refs.video.play();
              })
            }
          });
        }
      })

      this.hls.on(Hls.Events.ERROR, (event, data) => {
        if (data.details === "manifestLoadTimeOut") {
          console.log("初始化错误")
        }
      });

    }
  },
  beforeDestroy() {
    this.videoPause();
  },
}
</script>

<style scoped>
video {
  object-fit: fill;
}
</style>
